  <template>
    <div>
      <el-upload
      :multiple='multiple'
      :file-list="upFile"
      accept=".png,.jpg,.jpeg"
      class="upload_img"
      ref="upload1"
      :limit="5"
      list-type="picture-card"
      :disabled="!isSave"
      :on-preview="handlePictureCardPreview"
      :before-remove="beforeRemove"
      :class="{hide:canUser.length==5||!isSave,showlost:canUser.length>3,showless:canUser.length<=3}"
      :auto-upload="false"
      :on-exceed="handleExceed"
      @change="handleFileChange"
    >
    <div>
      <el-icon>
        <Plus /> 
      </el-icon>
      <div class="upload_text">
          上传
        </div>
      </div>
      
    </el-upload>

    <el-dialog v-model="dialogVisible" class="pre_img_dialog">
      <img w-full  :src="dialogImageUrl" class="pre_img" lt="Preview Image" />
    </el-dialog>
    </div>
  </template>
  <script  setup>
 import { reactive, ref, defineProps, defineEmits, computed, getCurrentInstance, watch, nextTick } from 'vue';
import { ElMessage,ElMessageBox} from 'jy-element-plus';
import LA_resourceInfo from '../store/teachResource'
const P= LA_resourceInfo()
const props = defineProps({
  multiple:Boolean,
  limitNum:Number,
  isSave:Boolean,
  imgList:Array,
})

  const selectedFile= ref([])
  const upFile= ref([])
  const disabledUpload= ref(false)
  const isUpload= ref(true)
  const dialogAddResource=ref(false)
  const percentNow=ref(0)
  const percentTotal=ref(0)
  const upload1=ref()
  let recordId=ref([])
  let preImg=ref([])
  let canUser=ref([])
  const dialogImageUrl = ref('')
  let deleteImg=ref([])
  const dialogVisible = ref(false)
  const emit = defineEmits(['uploadList','deleteImgs','getAllImgs'])
  const handlePictureCardPreview= (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
    const beforeRemove=(file,fileList)=>{
      canUser.value=fileList
      emit('getAllImgs',canUser.value)
      if(file.imageId!=null&&file.imageId!=undefined){
        deleteImg.value.push(file.imageId)
        emit('deleteImgs',deleteImg.value)
       
      }
      let arrIndex=selectedFile.value.findIndex(v=>v.uid==file.uid)
      if(arrIndex>=0){
        selectedFile.value.splice(arrIndex,1)
        emit('uploadList',selectedFile.value)

      }
  }
  const handleExceed=(files, fileList)=>{
      ElMessage.warning("当前限制一次性最多上传5个图片")
    }

  const handleFileChange = (event,fileList) => {
  const file = event.raw; //.raw
  const { name, size } = file;
  const m5 = size / 1024 / 1024;
  if (m5 > 5) {
    ElMessage.error("上传图片不能超过，5M");
    fileList.pop()
    return;
  }
  const is_type = name.indexOf(".png") != -1 || name.indexOf(".jpg") != -1|| name.indexOf(".jpeg") != -1;

  if (!is_type) {
    ElMessage.error("上传必须是，.png .jpeg .jpg格式的图片");
    fileList.pop()

    return;
  }
  selectedFile.value=[]
  for(let i of fileList){
    if(i.raw&& (i.name.indexOf(".png") != -1 || i.name.indexOf(".jpg") != -1|| i.name.indexOf(".jpeg") != -1)&&(i.size / 1024 / 1024 < 5)){
      selectedFile.value.push(i.raw)
      percentTotal.value = selectedFile.value.length
      percentNow.value=0

    }
  }

  let arr=preImg.value.concat([...selectedFile.value])
  canUser.value=arr
  emit('getAllImgs',canUser.value)
  emit('uploadList',selectedFile.value)

  
}


  watch(()=>props.imgList,(n,o)=>{
    nextTick(()=>{
      upFile.value=props.imgList
    })
    preImg.value=props.imgList
    canUser.value=props.imgList
    emit('getAllImgs',canUser.value)


},{immediate:true,deep:true})
  </script>
  <style scoped lang='scss'>
  .pre_img{
    max-width: -webkit-fill-available

  }
  .hide{
    ::v-deep .el-upload--picture-card{
    display: none !important;
   }
  }
  .upload_text{
    padding-top:15px;
    color: rgba(0,0,0,0.4);
  }
  .showlost{
    margin: 25px 0 10px 0;
  }
  .showless{
    margin: 20px 0;

  }

  .upload_img{
    min-height: 63px;
    ::v-deep .el-upload-list--picture-card{
      --el-upload-list-picture-card-size:82px;
    
    }
    ::v-deep .el-upload--picture-card{
      --el-upload-picture-card-size: 82px;
    }
    ::v-deep .el-upload-list__item.is-success .el-upload-list__item-status-label{
      display: none;
    }
    ::v-deep .el-upload-list__item{
      margin: 0 3px 3px 0;
    }
    ::v-deep .el-upload--picture-card:hover{
      border-color:#cdd0d6;
      color: #cdd0d6;
    }
    ::v-deep .el-upload--picture-card i{
      font-size:24px;
    }
    ::v-deep .el-upload:focus{
      border-color:#cdd0d6;
      color: #cdd0d6;
    }
  }
  @media screen and (max-width: 1366px) {
    .upload_img{
      ::v-deep .el-upload-list--picture-card{
      --el-upload-list-picture-card-size:60px;
    
    }
    ::v-deep .el-upload--picture-card{
      --el-upload-picture-card-size: 60px;
      // width: calc( 21vw / 5 );
      // height: calc( 21vw / 5 );
    }
    }
   
}
  
  </style>
  <style>

  </style>